<style>.uploadify-queue{display:none;}</style>
<div><span class="btn btn-primary" id="upload-image">上传图片</span></div>
<div class="photo-list clearfix margin-bottom" id="photo-list">
  <ul>
    
  </ul>
</div>
<form action="" class="form-horizontal" role="form">
  <div class="form-group">
    <div class="col-sm-8">
      <input type="hidden" name="images" id="images" value=""/>
      <input type="hidden" name="grp_id" value="{$_GET['grp_id']}"/>
      <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/addImagePost">保存更改</button>
    </div>
  </div>
</form>
<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

$(function() {
  var imagesInfo = [], // 新添加的照片数据放在这里
      imagesHidden = document.getElementById("images"),// 记录上传的照片数据并赋值到隐藏域。
      imagesReady = {$housePhotoImagesJSON} || []; // 从后台接收的照片数据
  
  addImageLists( imagesReady ); // 初始化显示
    
  $("#upload-image").uploadify({
    'multi'      :  true,
    'buttonClass'  :  'margin-bottom',
    'fileSizeLimit' :   '200kb',
    'buttonText'  :  '上传图片',
    'fileTypeDesc'   :   'Image Files',
    'fileTypeExts'   :   '*.jpg; *.png',
    'swf'      :   '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'    :   '__MODULE__/Upload/uploadOne',
    'onUploadStart'  :  function(){},
    'onUploadSuccess'  : function(data, res){
      
      var url = eval("(" + res + ")").extra.url;
      imagesInfo.push( {"url": url} );
      imagesReady.unshift( {"url": url} );
      addImageLists( imagesReady );
      imagesHidden.value = JSON.stringify( imagesInfo );
      
    }
  });
  
  
  function addImageLists( images ) 
  {
    if(!images){return;}
    var html = "",
        spacing = 15,  //每个图片间隔距离
        photoList = document.getElementById( "photo-list" ),
        photoListUl = photoList.children[0],
        clientWidth = document.documentElement.clientWidth,
        itemWidth = (clientWidth-spacing*6) / 7; //计算出每个图片宽
        
    for(var i=0; image = images[i]; i++)
    {
      html += "<li class='photo-item' data-id='" + image.id + "'>"
         +"<div class='photo'>"
         +"<a href='javascript:void(0)'><img src='" + image.url + "' /></a>"
         +"</div>"
         +"<span class='remove'>×</span>"
         +"</li>";   
    }
    //photoListUl.insertAdjacentHTML( "afterbegin", html );
    photoListUl.innerHTML = html;
  }
  
  $("#photo-list ul").delegate(".remove", "click", function(){
    removeImage( $(this).parent() );
  });
  
  function removeImage( elem ) {
    var id = $( elem ).attr( "data-id" );
    $.post("__CONTROLLER__/removeImagePost", {"id": id}, function( data ){
      $( elem ).fadeOut(400, function(){
        $( elem ).remove();
        $().alertMsg({"type": "success", "msg": data.msg});
      });
    });
  }
});
</script>